<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue-增删改查</title>
</head>
<body>
	<div id="app">		
		<br/>
		姓名：<input type="text" v-model="name"/>&nbsp;&nbsp;年龄：<input type="text" v-model="age"/>&nbsp;&nbsp;<input type="button" v-on:click="addorsave" value="保存"/>
		<br/><br/>
		<table border="1" v-show="this.peoples.length > 0">
			<caption>{{message}}</caption>
			<thead>
				<tr>
					<th>编号</th><th>姓名</th><th>年龄</th><th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(people,peopleIndex) in peoples">
					<td><input type="checkbox" v-bind:value="peopleIndex" v-model="selectArr"/>{{peopleIndex+1}}</td>
					<td v-text="people.name"></td>
					<td>{{people.age}}</td>
					<td>
						<a href="javascript:void(0)" v-on:click="del(peopleIndex)">删除</a>
						<a href="javascript:void(0)" v-on:click="edit(peopleIndex)">修改</a>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" id="checkall" v-on:click="selectAll"/>&nbsp;&nbsp;<label for="checkall">全选</label>&nbsp;&nbsp;</td>
					<td colspan="3">
						<a href="javascript:void(0)" v-bind:disabled="this.selectArr.length === 0" v-on:click="delSelect">批量删除</a>
					</td>
				</tr>
			</tbody>
		</table>
		
	</div>
	<script src="../jquery.min.js"></script>
	<script src="vue.min.js"></script>
	<script>
		new Vue({
			el:'#app',
			data:{
				message:'宝宝的人员列表',
				selectArr:[],
				index:null,
				name:null,
				age:null,
				peoples:[
					{ name:'张三',age:18},
					{ name:'李四',age:21},
					{ name:'王五',age:19},
					{ name:'赵六',age:20}
				]
			},
			 mounted: function () {
                // 穿插一个 全选方法
			
			},
			methods:{
				addorsave:function(){
					if(this.name != null && this.age != null){
						if(this.index == null)
							this.peoples.push({name:this.name,age:this.age});
						else
							this.peoples.splice(this.index,this.index,{name:this.name,age:this.age});
						this.index = null;
						this.name = null;
						this.age = null;	
					}						
					else
						alert('姓名和年龄均不能为空！');						
				},
				edit:function(index){				
					this.index = index;
					this.name = this.peoples[index].name;
					this.age = this.peoples[index].age;					
				},
				del:function(index){
					this.peoples.splice(index,1);
				},
				 selectAll:function(event) {
					var _this = this;
					//console.log(event.currentTarget)
					if (!event.currentTarget.checked) {
						this.selectArr = [];
					} else { //实现全选
						_this.selectArr = [];
						_this.peoples.forEach(function(item, i) {
							_this.selectArr.push(i);
						});
					}
				},
				delSelect:function(){
					let arr = [];
					var len = this.peoples.length;
					if(len > 0){
						for (var i = 0; i < len; i++) {
							if (this.selectArr.indexOf(i)>=0) {
								console.log(this.selectArr.indexOf(i))
							}else{
								arr.push(this.peoples[i])
							}
						}
						this.peoples = arr;
						this.selectArr = []
					} 
					else
						alert("请至少选中一项！");
				}			
			}			
		});	
	</script>
</body>
</html>